<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {DragAndDrop} from 'ol/interaction';
    import {GeoJSON,KML,TopoJSON,GPX} from 'ol/format';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';

    export default {
        name: 'DragAndDropInteraction',
        data() {
            return {
            }
        },
        mounted() {
            //初始的矢量数据
            const vectorLayer = new VectorLayer({
                source: new VectorSource({
                    url: 'http://localhost:8888/openlayer/geojson/countries.geojson',
                    format: new GeoJSON(),
                }),
            });
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                    vectorLayer
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 3   //缩放到的级别
                })
            });

            //文件夹中拖拉文件到浏览器从而加载地理数据的功能，地理数据是以图片的形式展示在浏览器
            let dragAndDrop = new DragAndDrop({
                source: vectorLayer.getSource(),//如果有初始的数据源，拖入时会将旧的数据源移除，创建新的 数据源
                formatConstructors: [GeoJSON,KML,TopoJSON,GPX]//拖入的数据格式
            });
            this.map.addInteraction(dragAndDrop);


        },
        methods: {
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>
